<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>端口：8800</title>
  </head>
  <body>
    <h1>发请求获取json数据</h1>
    <p>
      <input type="button" value="获取数据1" id="btn1" />
    </p>

    <h1>发请求获取jsonp数据</h1>
    <p>
      <input type="button" value="jsonp跨域" id="btn2" />
    </p>

    <h1>发请求获取cors数据</h1>
    <p>
      <input type="button" value="cors跨域" id="btn3" />
    </p>

    <h1>发请求获取微博数据</h1>
    <p>
      <input type="button" value="服务器代理" id="btn4" />
    </p>
  </body>
  <script src="js/jquery.min.js"></script>
  <script>
    //No 'Access-Control-Allow-Origin' header 跨域，获取不到数据
    $("#btn1").click(() => {
      $.ajax({
        url: "http://localhost:9900/data.json",
        success(res) {
          console.log(res);
        },
      });
    });

    //jsonp跨域
    $("#btn2").click(() => {
      $.ajax({
        url: "http://localhost:9900/jsonp",
        type: "get",
        jsonp: "callback",
        dataType: "jsonp",
        success(res) {
          console.log(res);
        },
      });
    });

    //cors跨域
    $("#btn3").click(() => {
      $.ajax({
        url: "http://localhost:9900/cors",
        type: "get",
        success(res) {
          console.log(res);
        },
      });
    });

    //https://m.weibo.cn/api/config/list
    $("#btn4").click(() => {
      $.ajax({
        url: "http://localhost:9900/sinaapi/api/config/list",
        type: "get",
        success(res) {
          console.log(res);
        },
      });
    });
  </script>
  <!-- <script>
    function show(str) {
      console.log(str);
    }

    show('sss');
  </script>
  <script src="http://localhost:9900/jsonp?callback=show"></script> -->
</html>
